<template>
  <div class="detail-container" ref="container" id="container">
    <div class="header">
        <div class="header-left">
            <a href='https://kingdata.jinse.com/'> <img class="hl-logo" src="@/assets/images/logo-1.png" alt=""></a>
            <img class="hl-text" src="@/assets/images/text.png" alt="">
            <span class="hl-date">{{endVal}}</span>
        </div>
        <div class="header-right">
            <div class="back-btn" @click="handleTo('/')">查看全部</div>
            <v-music :src="musicSrc"></v-music>
        </div>
    </div>
    <!-- <div v-show="currentEvent" class="event-box">{{currentEvent}}</div> -->
    <div class="chart-container" ref="chart">
    </div>
    <p class="chart-title">DeFi 板块历史总锁仓金额走势</p>
  </div>
</template>

<script>
// @ is an alias to /src
var echarts = require('echarts');
import vMusic from '@/components/music.vue'
const events=require('../../static/data/events.json')
const moment=require('moment')
import { $tools } from '../utils/tools'
import { DataModule } from '../modules/data'
const dataModule=new DataModule()
import {formatBigNum} from '@/utils/helper'

export default {
  name: 'detail',
  components:{
      vMusic
  },
  data(){
      return {
          musicSrc:require('../../static/music/bg.mp3'),
          datas: dataModule.getDefi(),
          startVal:"2018/01/01",
          endVal:"2018/01/01",
          timers:null,
          currentEvent:'',
          currentKey:''
      }
  },
  watch:{
     endVal(newVal,oldVal){
         if(events[newVal]){
             this.currentKey=newVal
             this.currentEvent=`${newVal}-${events[newVal]}`
         }
     }
  },
  mounted(){
      window.addEventListener('resize', this.resize)

      

      this.$nextTick(()=>{
          this.resize()
          this.init()
      })

  },
  methods:{
      init(){
        var chart=this.$refs.chart
        // this.myChart = echarts.init(chart,null,{renderer:'svg'});
        this.myChart = echarts.init(chart)

        this.option = {
            grid:[{
                left:20,
                right:20,
                bottom: 30,
                top: 50,
                containLabel:true
            }],
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                },
                axisTick:{
                    length:1
                },
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color: "#eee"
                    }
                  },
                axisLabel:{
                    color:'#c4c4c4',
                    fontSize:10,
                    align:'center',
                    width:100
                }
            },
            yAxis: {
              type: "value",
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                fontSize: 10,
                color: "#a3a3a3",
                verticalAlign:'bottom',
                formatter: formatBigNum
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed",
                  color: "#F0F0F0",
                }
              }
            },
            series: [{
                name: '总锁仓金额',
                type: 'line',
                smooth:true,
                barWidth: 0,
                symbol:(value, params) =>{
                    var _this=this
                    var key=value[0]
                    var eventTxt=events[this.currentKey]
                    if(eventTxt && this.currentKey==key){
                        return 'image://http://cdn.blocktrending.com/up.png'
                        // return "circle"
                    }else{
                        return 'none'
                    }
                },
                symbolSize:(value,params) =>{
                    return [24,45]
                },
                symbolKeepAspect: false,
                animation: false,
                symbolOffset:[0, '-20%'],
                showSymbol: true,
                label:{
                    show:true,
                    position:'top',
                    distance:2,
                    color:'#666',
                    fontSize:12,
                    align:'center',
                    lineHeight:26,
                    backgroundColor:"#e1edfb",
                    borderColor:'#ECECEC',
                    borderWidth:0.5,
                    borderRadius:4,
                    padding:[0,10],
                    formatter:(params) =>{
                        var key=params.data[0]
                        if(events[this.currentKey] && this.currentKey==key){
                             return events[this.currentKey]
                        }else{
                            return ''
                        }

                    },
                    
                },
                hoverAnimation: false,
                animation:false,
                data: this.datas,
                lineStyle:{
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0, color:'rgb(69,255,156)' // 0% 处的颜色
                        }, {
                            offset: 1, color:'rgb(138, 104, 246)' // 100% 处的颜色
                        }],
                        global: true // 缺省为 false
                    },
                     width:3
                },
                 areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0.5,
                        y: 0.5,
                        colorStops: [{
                            offset: 0, color: 'rgba(53, 162, 255, 0.1)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(53, 162, 255, 0)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            }]
        };
        this.setChart()
      },
      setChart(){

        this.now =+new Date(2020, 10, 1);
        this.oneDay = 24 * 3600 * 1000;
        var index = 0
        var data=[]
        this.timers = setInterval(()=>{
            if(index >= this.datas.length){
                    this._clearTimer()
                    this.currentEvent=''
                    // this.datas=dataModule.getDefi()
                    // this.myChart.clear
                    // this.myChart.setOption({
                    //     series: [{
                    //         data: this.datas
                    //     }]
                    // });
                return
            }

            data.push(this.datas[index])
            if(data.length>120){
                data.shift();
            }
            this.endVal = moment(new Date(this.endVal).getTime()+3600*24*1000).format('YYYY/MM/DD')
            index ++
            this.myChart.setOption({
                    series: [{
                        data:data
                    }]
            });

        },100)

        if (this.option && typeof this.option === "object") {
            this.myChart.setOption(this.option, true);
            this.myChart.resize();
        }
      },
    _clearTimer(){
        clearInterval(this.timers)
        this.timers=null
        this.startVal='2018/01/01'
        this.endVal='2018/01/01'
    },
    randomData(){
    this.now = new Date(+this.now + this.oneDay);
    this.value = 13191620360
    return {
        name: this.now.toString(),
        value: [
            [this.now.getFullYear(), this.now.getMonth() + 1, this.now.getDate()].join('/'),
            this.value
        ]
    };
},
    resize () {
      var width = window.innerWidth,
          height = window.innerHeight,
          $wrapper = document.getElementById("container"),
          style = "";
      if (width >= height) { // 横屏
        style += "width:" + width + "px;";  // 注意旋转后的宽高切换
        style += "height:" + height + "px;";
        style += "-webkit-transform: rotate(0); transform: rotate(0);";
        style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
        style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
      }
      else { // 竖屏
        style += "width:" + height + "px;";
        style += "height:" + width + "px;";
        style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
        // 注意旋转中点的处理
        style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
        style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
      }
      $wrapper.style.cssText = style;
    }
  },
  foreDestroy(){
      this._clearTimer()
  }
}
</script>
<style scoped>
        .detail-container{
            display: flex;
            flex-direction: column;
        }
        .header{
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 37px;
        }
        .header .header-left{
            display: flex;
            align-items: center;
        }
        .header .header-left .hl-logo{
            height: 4vmin;
            width: auto;
            margin-left: 5vmin;
        }
        .header .header-left .hl-text{
            height: 5vmin;
            width: auto;
            margin-left: 5vmin;
        }
        .header .header-left .hl-date{
            font-size: 4vmin;
            color: #939393;
            margin-left: 5vmin;
        }
        .header .header-right{
            display: flex;
            align-items: center;
            padding-right: 6vmin;
        }
        .header .header-right .back-btn{
            display: inline-block;
            padding: 0 4vmin;
            margin-right: 4vmin;
            height: 7vmin;
            line-height: 7vmin;
            border-radius: 6.5vmin;
            font-size: 3vmin;
            color: #fff;
            background: linear-gradient(to right,#F375FF,#702FFB);
        }
        .event-box{
            position: absolute;
            top: 15vmin;
            left: 50%;
            transform: translateX(-50%);
            display: inline-block;
            padding: 1vmin 4vmin;
            line-height: 6vmin;
            font-size: 4.5vmin;
            color: #666;
            border-radius: 2vmin;
            border: 0.5vmin solid #ececec;
            background-color: #fff;
        }
        .chart-container{
            width: 100%;
            /* height: calc(100% - 37px); */
            flex: 1;
            box-sizing: border-box;
            padding-bottom: 10px;
        }
    @media screen and (orientation: portrait) { /* 竖屏 */

    }
    @media screen and (orientation: landscape) { /* 横屏 */

    }
    .chart-title {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 6vmin;
        line-height: 6vmin;
        color: #ddd;
        font-size: 4.5vmin;
        text-align: center;
        
    }
</style>
